<script setup lang="ts">
import {reactive, ref} from 'vue';
import {deepClone} from '@/utils/index.ts'
import {useRouter} from "vue-router";

const show = ref(true);
const router = useRouter();
const searchText = ref('');
const close = (tag) => {
  activeIds.value = activeIds.value.filter(item =>{
    return item !== tag;
  })
};
const onSearch = (val) => {
   tagList.value = originalTagList.map(parentTag => {
     const tempparenttag = deepClone(parentTag)
     tempparenttag.children = tempparenttag.children.filter(item => {
    return item.id.includes(searchText.value);
})

     return tempparenttag
})


};

const onCancel = () => {
  searchText.value = '';
  tagList.value = originalTagList;
  router.back()
};
//已选标签
const activeIds = ref([]);

const activeIndex = ref(0);

const originalTagList = [
  {
    text: '学习',
    children: [
      { text: '图书馆搭子', id: '图书馆搭子'},
      { text: '实验室伙伴', id: '实验室伙伴'},
      { text: '考研大军', id: '考研大军'},
      { text: '编程大佬', id: '编程大佬'},
    ],
  },
  {
    text: '兴趣爱好',
    children: [
      { text: '竞赛组队', id: '竞赛组队'},
      { text: '考公小组', id: '考公小组'},
      { text: '夜跑搭子', id: '夜跑搭子'},
      { text: '健身房伙伴', id: '健身房伙伴'},
      { text: '羽毛球王者', id: '羽毛球王者'},
      { text: '骑行小队', id: '骑行小队'},
      { text: '瑜伽冥想', id: '瑜伽冥想'},
      { text: '街舞社', id: '街舞社'},
      { text: '绘画交流', id: '绘画交流'},
      { text: '吉他弹唱', id: '吉他弹唱'},
    ],
  },
  {
    text: '校园服务',
    children: [
      { text: '夜宵搭子', id: '夜宵搭子'},
      { text: '校园代取快递', id: '校园代取快递'},
      { text: '二手闲置交易', id: '二手闲置交易'},
      { text: '实习信息共享', id: '实习信息共享'},

    ],
  },
  {
    text: '个人特点',
    children: [
      { text: '社牛本牛', id: '社牛本牛'},
      { text: '搞笑担当', id: '搞笑担当'},
      { text: '夜猫子', id: '夜猫子'},
      { text: '理性分析派', id: '理性分析派'},
      { text: '树洞倾听者', id: '树洞倾听者'},

    ]
  }
];

let tagList = ref(originalTagList);


const doSearch = () => {

  router.push({
    path: '/SearchResult',
    query: {
      activeIds: activeIds.value
    }
  })
  return
}
</script>

<template>
  <form action="/">
    <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>

  <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
  >
    已选标签
  </van-divider>
  <van-space wrap>
    <van-tag :show="show" v-for="tag in activeIds"  closeable size="large" type="primary" @close="close(tag)">
      {{tag}}
    </van-tag>
  </van-space>


  <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
  >    可选标签
  </van-divider>

  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="tagList"
  />

  <van-button type="primary" block @click="doSearch">搜索</van-button>

</template>

<style scoped>

</style>